<template>
  <div class="ai-agent-optimized">
    <!-- 平台介绍组件 -->
    <NavBar
      :is-logged-in="isLoggedIn"
      @login="login"
      @go-to-console="goToConsole"
      @toggle-theme="toggleTheme"
      :theme-icon="themeIcon"
    />

    <!-- 主要内容容器，添加顶部边距避免被NavBar遮挡 -->
    <div class="content-wrapper">
      <!-- 面包屑导航 -->
      <nav class="breadcrumb-nav">
        <div class="breadcrumb-content">
          <router-link to="/" class="breadcrumb-link">
            <i class="fas fa-home"></i>
            首页
          </router-link>
          <span class="breadcrumb-separator">/</span>
          <router-link to="/" class="breadcrumb-link">
            智能助手
          </router-link>
          <span class="breadcrumb-separator">/</span>
          <span class="breadcrumb-current">{{ currentAgent.title }}</span>
        </div>
      </nav>

      <!-- 统一背景容器 -->
      <div class="unified-background">
        <!-- 两列布局容器 -->
        <div class="two-column-layout">
          <!-- 左侧列：应用信息和内容 -->
          <div class="left-column">
            <!-- 顶部应用信息卡片 -->
            <section class="app-info-card">
              <div class="app-header">
                <div class="header-content">
                  <div class="app-identity">
                    <div class="agent-avatar">
                      <img
                        :src="currentAgent.avatar"
                        :alt="`${currentAgent.title} 头像`"
                        class="avatar-img"
                      />
                    </div>
                  </div>

                  <div class="app-info">
                    <div class="title-action-row">
                      <h1 class="app-title">{{ currentAgent.title }}</h1>
                      <div class="app-actions">
                        <button
                          class="btn-primary enlarged-btn"
                          :disabled="currentAgent.status === 0"
                          @click="handleButtonClick"
                          v-if="currentAgent.status === 1"
                        >
                          <i :class="currentAgent.id === 18 ? 'fas fa-download' : 'fas fa-rocket'"></i>
                          {{ currentAgent.id === 18 ? '下载插件' : '立即使用' }}
                        </button>
                        <button
                          class="btn-primary enlarged-btn btn-disabled"
                          disabled
                          v-else
                        >
                          <i class="fas fa-cog"></i>
                          开发中
                        </button>
                      </div>
                    </div>

                    <!-- 新增应用元信息 -->
                    <div class="app-meta-info">
                      <div class="meta-item">
                        <span>开发者：{{ currentAgent.developer }}</span>
                      </div>
                      <div class="meta-item">
                        <span>版本：{{ currentAgent.version }}</span>
                      </div>
                      <div class="meta-item">
                        <span>状态：</span>
                        <span :class="{'status-active': currentAgent.status === 1, 'status-inactive': currentAgent.status === 0}">
                          {{ currentAgent.status === 1 ? '在用' : '开发中' }}
                        </span>
                      </div>
                      <div class="meta-item">
                        <span>使用次数：{{ currentAgent.usageCount }}次</span>
                      </div>
                    </div>
                    <p class="app-description">{{ currentAgent.fullDescription }}</p>

                    <div class="app-tags">
                      <span class="tag" v-for="tag in currentAgent.tags" :key="tag">#{{ tag }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </section>

            <!-- AI界面演示 -->
            <section class="demo-section">
              <div class="demo-container">
                <div class="demo-window">
                  <div class="window-header">
                    <div class="window-controls">
                      <span class="control red"></span>
                      <span class="control yellow"></span>
                      <span class="control green"></span>
                    </div>
                    <div class="window-title">{{ currentAgent.title }} - 页面展示</div>
                  </div>
                  <div class="demo-content">
                    <!-- 对指定智能助手显示演示图片 -->
                    <img v-if="[1, 2, 3, 17, 18].includes(currentAgent.id)"
                      :src="currentAgent.demoImage"
                      :alt="`${currentAgent.title} 演示界面`"
                      class="intro-image"
                    />
                    <!-- 只对其他非人工智能问答助手、WPS智能助手、桂小库智能体、行政执法AI知识库助手显示对话窗口 -->
                    <div v-else-if="currentAgent.id !== 1 && currentAgent.id !== 18 && currentAgent.id !== 17 && currentAgent.id !== 2" class="app-intro-demo">
                      <!-- 统一使用完整会话窗口样式 -->
                      <div class="demo-scenario">
                        <div class="chat-window">
                          <!-- 会话历史记录 -->
                          <div class="chat-history">
                            <!-- 欢迎消息 -->
                            <div class="chat-message system">
                              <div class="system-message">欢迎使用 {{ currentAgent.title }}！请问有什么可以帮助您的？</div>
                            </div>

                            <!-- 根据智能体功能显示不同的对话内容 -->
                            <template v-if="currentAgent.id === 6 || currentAgent.id === 7 || currentAgent.id === 13">
                              <!-- 翻译类智能体对话 -->
                              <div class="chat-message user">
                                <div class="message-avatar"><i class="fas fa-user"></i></div>
                                <div class="message-content">请将以下英文翻译成中文：Hello world, this is a test translation.</div>
                              </div>
                              <div class="chat-message ai">
                                <div class="message-avatar"><img :src="currentAgent.avatar" :alt="currentAgent.title" /></div>
                                <div class="message-content">你好世界，这是一个测试翻译。</div>
                              </div>
                              <div class="chat-message user">
                                <div class="message-avatar"><i class="fas fa-user"></i></div>
                                <div class="message-content">请将以下中文翻译成英文：人工智能改变世界。</div>
                              </div>
                              <div class="chat-message ai">
                                <div class="message-avatar"><img :src="currentAgent.avatar" :alt="currentAgent.title" /></div>
                                <div class="message-content">Artificial intelligence is changing the world.</div>
                              </div>
                            </template>

                            <template v-else-if="currentAgent.id === 8">
                              <!-- 全书翻译智能体对话 -->
                              <div class="chat-message user">
                                <div class="message-avatar"><i class="fas fa-user"></i></div>
                                <div class="message-content">我想翻译一本名为《Introduction to AI》的书到中文，请问可以帮我吗？</div>
                              </div>
                              <div class="chat-message ai">
                                <div class="message-avatar"><img :src="currentAgent.avatar" :alt="currentAgent.title" /></div>
                                <div class="message-content">
                                  <p>当然可以！我可以帮您翻译这本书。</p>
                                  <p>📊 翻译进度：85%</p>
                                  <div class="progress-container"><div class="progress-bar" style="width: 85%"></div></div>
                                  <p>已完成章节：第1-7章</p>
                                  <p>正在翻译：第8章</p>
                                </div>
                              </div>
                            </template>

                            <template v-else-if="currentAgent.id === 9">
                              <!-- 合同审核智能体对话 -->
                              <div class="chat-message user">
                                <div class="message-avatar"><i class="fas fa-user"></i></div>
                                <div class="message-content">请帮我审核这份合同，看看是否有潜在风险？</div>
                              </div>
                              <div class="chat-message ai">
                                <div class="message-avatar"><img :src="currentAgent.avatar" :alt="currentAgent.title" /></div>
                                <div class="message-content">
                                  <p>已完成合同审核，发现以下问题：</p>
                                  <div class="review-tag warning">⚠️ 风险条款</div>
                                  <p>第5条存在潜在法律风险，建议修改赔偿金额的计算方式。</p>
                                  <div class="review-tag suggestion">💡 建议修改</div>
                                  <p>第8条表述不够清晰，建议明确责任界定。</p>
                                  <div class="review-tag success">✅ 正常条款</div>
                                  <p>第1-4条、6-7条、9-10条无明显问题。</p>
                                </div>
                              </div>
                            </template>

                            <template v-else-if="currentAgent.id === 10">
                              <!-- 文本排版智能体对话 -->
                              <div class="chat-message user">
                                <div class="message-avatar"><i class="fas fa-user"></i></div>
                                <div class="message-content">请帮我排版这段文字：hello,WORLD! this is a TEST.</div>
                              </div>
                              <div class="chat-message ai">
                                <div class="message-avatar"><img :src="currentAgent.avatar" :alt="currentAgent.title" /></div>
                                <div class="message-content">
                                  <p>已完成排版：</p>
                                  <div class="text-before">hello,WORLD! this is a TEST.</div>
                                  <div class="text-after">Hello, World! This is a test.</div>
                                </div>
                              </div>
                            </template>

                            <template v-else-if="currentAgent.id === 11">
                              <!-- 文章综述智能体对话 -->
                              <div class="chat-message user">
                                <div class="message-avatar"><i class="fas fa-user"></i></div>
                                <div class="message-content">请帮我生成一篇关于人工智能在医疗领域应用的文章综述。</div>
                              </div>
                              <div class="chat-message ai">
                                <div class="message-avatar"><img :src="currentAgent.avatar" :alt="currentAgent.title" /></div>
                                <div class="message-content">
                                  <p>已为您生成综述：</p>
                                  <h4>人工智能在医疗领域的应用综述</h4>
                                  <p><strong>研究主题：</strong>人工智能在医疗领域的应用</p>
                                  <p><strong>综述要点：</strong></p>
                                  <ol>
                                    <li>AI辅助诊断技术：提高诊断准确率和效率</li>
                                    <li>医疗影像分析：快速识别病变和异常</li>
                                    <li>药物研发加速：缩短新药研发周期</li>
                                    <li>个性化治疗方案：基于患者数据定制最佳治疗</li>
                                  </ol>
                                </div>
                              </div>
                            </template>

                            <template v-else-if="currentAgent.id === 12">
                              <!-- 文本润色智能体对话 -->
                              <div class="chat-message user">
                                <div class="message-avatar"><i class="fas fa-user"></i></div>
                                <div class="message-content">请帮我润色这句话：这个项目很好，我们应该继续做下去。</div>
                              </div>
                              <div class="chat-message ai">
                                <div class="message-avatar"><img :src="currentAgent.avatar" :alt="currentAgent.title" /></div>
                                <div class="message-content">
                                  <p>润色建议：</p>
                                  <div class="polish-before">这个项目很好，我们应该继续做下去。</div>
                                  <div class="polish-after">该项目展现出显著潜力，建议持续推进并进一步完善细节，以实现更大的商业价值。</div>
                                </div>
                              </div>
                            </template>

                            <template v-else-if="currentAgent.id === 14">
                              <!-- 公司政策智能体对话 -->
                              <div class="chat-message user">
                                <div class="message-avatar"><i class="fas fa-user"></i></div>
                                <div class="message-content">请问如何申请公司的年假？</div>
                              </div>
                              <div class="chat-message ai">
                                <div class="message-avatar"><img :src="currentAgent.avatar" :alt="currentAgent.title" /></div>
                                <div class="message-content">
                                  <p>申请年假流程：</p>
                                  <ol>
                                    <li>登录公司OA系统</li>
                                    <li>进入"请假申请"模块</li>
                                    <li>选择"年假"类型</li>
                                    <li>填写请假时间段</li>
                                    <li>提交部门主管审批</li>
                                  </ol>
                                  <p>温馨提示：年假申请需提前3个工作日提交。</p>
                                </div>
                              </div>
                            </template>

                            <template v-else-if="currentAgent.id === 15">
                              <!-- 法律顾问智能体对话 -->
                              <div class="chat-message user">
                                <div class="message-avatar"><i class="fas fa-user"></i></div>
                                <div class="message-content">刑法修正案十一对高空抛物行为有何规定？</div>
                              </div>
                              <div class="chat-message ai">
                                <div class="message-avatar"><img :src="currentAgent.avatar" :alt="currentAgent.title" /></div>
                                <div class="message-content">
                                  <p>根据《中华人民共和国刑法修正案（十一）》，新增了高空抛物罪：</p>
                                  <div class="law-article">
                                    第二百九十一条之二 从建筑物或者其他高空抛掷物品，情节严重的，处一年以下有期徒刑、拘役或者管制，并处或者单处罚金。
                                  </div>
                                  <p>有前款行为，同时构成其他犯罪的，依照处罚较重的规定定罪处罚。</p>
                                </div>
                              </div>
                            </template>

                            <template v-else-if="currentAgent.id === 16">
                              <!-- 政策分析智能体对话 -->
                              <div class="chat-message user">
                                <div class="message-avatar"><i class="fas fa-user"></i></div>
                                <div class="message-content">请帮我分析这份新出台的政策文件。</div>
                              </div>
                              <div class="chat-message ai">
                                <div class="message-avatar"><img :src="currentAgent.avatar" :alt="currentAgent.title" /></div>
                                <div class="message-content">
                                  <p>政策分析报告：</p>
                                  <div class="analysis-item">
                                    <h5>📋 上位法一致性</h5>
                                    <p>分析结果：无冲突</p>
                                    <p>与现有法律法规保持一致，未发现抵触条款。</p>
                                  </div>
                                  <div class="analysis-item">
                                    <h5>🔍 内部逻辑</h5>
                                    <p>分析结果：存在3处表述需要明确</p>
                                    <p>建议明确第3、5、7条中的责任主体和时间节点。</p>
                                  </div>
                                  <div class="analysis-item">
                                    <h5>💡 实施建议</h5>
                                    <p>建议增加具体操作细则，制定配套实施文件。</p>
                                  </div>
                                </div>
                              </div>
                            </template>

                            <template v-else-if="currentAgent.id === 17">
                              <!-- 桂小库智能体对话 -->
                              <div class="chat-message user">
                                <div class="message-avatar"><i class="fas fa-user"></i></div>
                                <div class="message-content">请问国库行政许可事项办理需要准备哪些材料？</div>
                              </div>
                              <div class="chat-message ai">
                                <div class="message-avatar"><img :src="currentAgent.avatar" :alt="currentAgent.title" /></div>
                                <div class="message-content">
                                  <p>您好！我是桂小库，很高兴为您解答国库行政许可相关问题。</p>
                                  <div class="answer-item">
                                    <h5>📋 国库行政许可办理材料清单：</h5>
                                    <ul>
                                      <li>《国库行政许可事项申请表》</li>
                                      <li>申请机构营业执照复印件</li>
                                      <li>法定代表人身份证明文件</li>
                                      <li>相关业务资质证明</li>
                                      <li>内部管理制度文件</li>
                                    </ul>
                                  </div>
                                  <p>💡 提示：具体所需材料可能因业务类型有所不同，建议您根据具体办理事项准备相应材料。</p>
                                </div>
                              </div>
                              <div class="chat-message user">
                                <div class="message-avatar"><i class="fas fa-user"></i></div>
                                <div class="message-content">请帮我查询本月各金融机构的行政许可办理情况统计。</div>
                              </div>
                              <div class="chat-message ai">
                                <div class="message-avatar"><img :src="currentAgent.avatar" :alt="currentAgent.title" /></div>
                                <div class="message-content">
                                  <p>正在为您查询统计数据...</p>
                                  <div class="stats-preview">
                                    <h5>📊 本月国库行政许可办理统计</h5>
                                    <div class="stats-grid">
                                      <div class="stat-item">
                                        <span class="stat-number">156</span>
                                        <span class="stat-label">总申请数</span>
                                      </div>
                                      <div class="stat-item">
                                        <span class="stat-number">142</span>
                                        <span class="stat-label">已办结</span>
                                      </div>
                                      <div class="stat-item">
                                        <span class="stat-number">14</span>
                                        <span class="stat-label">办理中</span>
                                      </div>
                                      <div class="stat-item">
                                        <span class="stat-number">91%</span>
                                        <span class="stat-label">办结率</span>
                                      </div>
                                    </div>
                                  </div>
                                  <p>📈 详细统计报告已生成，您可以查看完整的数据分析图表。</p>
                                </div>
                              </div>
                            </template>

                            <template v-else>
                              <!-- 默认智能体对话 -->
                              <div class="chat-message user">
                                <div class="message-avatar"><i class="fas fa-user"></i></div>
                                <div class="message-content">你好，我想了解一下你的功能。</div>
                              </div>
                              <div class="chat-message ai">
                                <div class="message-avatar"><img :src="currentAgent.avatar" :alt="currentAgent.title" /></div>
                                <div class="message-content">
                                  <p>您好！我是 {{ currentAgent.title }}，很高兴为您服务。</p>
                                  <p>我可以帮助您：</p>
                                  <ul>
                                    <li>提供专业的智能问答服务</li>
                                    <li>解答您的各种问题</li>
                                    <li>根据您的需求提供精准的帮助</li>
                                  </ul>
                                  <p>请随时告诉我您的需求，我会尽力为您提供支持！</p>
                                </div>
                              </div>
                            </template>

                            <!-- 输入区域 -->
                            <div class="chat-input-area">
                              <input type="text" placeholder="请输入您的问题..." class="chat-input" disabled />
                              <button class="send-button" disabled>发送</button>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- 结束对话窗口条件渲染 -->
                  </div>
                </div>
              </div>
            </section>

            <!-- 应用介绍 -->
            <section class="app-intro-section">
              <div class="section-header">
                <i class="fas fa-info-circle"></i>
                <h2>应用介绍</h2>
              </div>
              <div class="app-intro-content enlarged-text">
                <p><span v-html="currentAgent.introduction"></span></p>
              </div>
            </section>

            <!-- 使用指南 -->
            <section class="guide-section">
              <div class="section-header">
                <i class="fas fa-play-circle"></i>
                <h2>使用指南</h2>
              </div>
              <div class="guide-steps enlarged-text">
                <div class="step" v-for="(step, index) in currentAgent.steps" :key="index">
                  <div class="step-header">
                    <div class="step-number">步骤 {{ index + 1 }}</div>
                    <div class="step-title">{{ step }}</div>
                  </div>
                  <div class="step-image" v-if="currentAgent.stepImages && currentAgent.stepImages[index]">
                    <img :src="currentAgent.stepImages[index]" :alt="`步骤${index + 1}图片`" />
                  </div>
                </div>
              </div>
            </section>
          </div>

          <!-- 右侧列：热门助手 -->
          <div class="right-column">
            <div class="sidebar-card">
              <section class="recommendations-section">
                <div class="section-header">
                  <i class="fas fa-thumbs-up"></i>
                  <h2>其他热门AI助手</h2>
                </div>
                <div class="recommendations-list">
                  <div
                    class="recommendation-item"
                    v-for="agent in recommendedAgents"
                    :key="agent.id"
                    @click="goToDetail(agent.id)"
                  >
                    <div class="rec-header">
                      <div class="rec-avatar-container">
                        <img class="rec-avatar" :src="agent.avatar" :alt="agent.title" @error="handleAvatarError" />
                      </div>
                      <h3 class="rec-title">{{ agent.title }}</h3>
                    </div>
                    <div class="rec-content">
                      <div class="rec-info">
                        <p class="rec-author">
                          <i class="fas fa-user"></i>
                          使用次数：{{ agent.usageCount }}次
                        </p>
                      </div>
                    </div>
                    <p class="rec-description">{{ agent.description }}</p>
                  </div>
                </div>
              </section>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 页脚组件 -->
    <Footer />
  </div>
</template>

<script>
import NavBar from '@/layout/UserView/NavBar.vue'
import Footer from '@/layout/UserView/Footer.vue'

const agentTemplates = [
  {
    id: 1,
    title: "人工智能问答助手",
    description: "基于大模型的智能问答助手，能够理解上下文进行多轮对话，回答您的提问。支持名词解释、报告生成、通用问答、数据分析等多种应用场景，为您提供精准、专业的知识服务",
    author: "科技处",
    tags: ["智能问答", "多轮对话", "知识服务"],
    category: ["qa", "assistant"],
    avatar: "/img/ai-avatar.png",
    demoImage: "/img/image.png",
    fullDescription: "人工智能问答助手基于先进的大语言模型技术，具备强大的自然语言理解和生成能力。系统能够准确理解用户的多维度查询需求，涵盖科学技术、人文历史、生活常识、专业技术等各个领域。通过深度学习算法，助手能够提供准确、权威、易懂的知识解答，支持多轮对话交互，保持上下文连贯性。系统还具备报告生成、内容创作、数据分析等高级功能，可根据用户需求自动生成各类文档和分析报告，大幅提升工作效率。采用持续学习机制，根据用户反馈不断优化回答质量，为个人学习、企业决策、科研探索等提供智能化知识服务支持。无论是日常生活中的小问题，还是专业领域的深度探讨，都能获得满意的智能解答。",
    introduction: "人工智能问答助手是一款基于先进大语言模型技术的智能应用，致力于为用户提供专业、准确、高效的知识问答服务。系统支持多轮对话、上下文理解，可处理各类复杂查询，涵盖科学技术、人文历史、生活常识、专业技术等多个领域。无论是日常问题咨询还是专业领域探讨，都能为您提供满意的智能解答，成为您学习和工作的得力助手。",
    developer: "科技处",
    version: "v1.0.1",
    usageCount: 66,
    status: 1,
    pagePath: "/agent-function/AIchat",
    appName: "AIchat",
    features: [
      { desc: "基于大模型的智能问答引擎 - 采用先进的自然语言处理技术，准确理解用户查询意图，提供精准、相关的答案" },
      { desc: "多轮对话上下文理解 - 保持长对话的连贯性，理解上下文语境，提供符合对话场景的智能回复" },
      { desc: "知识库智能检索 - 快速从海量知识库中检索相关信息，支持多领域知识问答" },
      { desc: "自然语言生成能力 - 生成流畅、准确的自然语言回复，支持多种表达风格和格式" },
      { desc: "实时学习和优化 - 根据用户反馈持续优化回答质量，提升用户体验" },
      { desc: "多语言支持 - 支持中文、英文等多种语言的自然语言处理" }
    ],
    scenarios: [
      { desc: "智能客服问答，快速解决用户问题 - 支持7×24小时在线服务，准确理解用户意图，提供个性化解决方案，大幅提升客户满意度和企业服务效率" },
      { desc: "知识问答和信息查询 - 涵盖科学技术、历史文化、生活常识等各领域知识，支持多语言查询，提供准确、权威的信息解答和相关资料推荐" },
      { desc: "技术文档和API文档问答 - 深度理解编程语言、框架和工具文档，为开发者提供代码示例、调试指导和最佳实践建议，加速开发进程" },
      { desc: "名词解释和专业术语解析 - 精准解释各学科专业术语、技术概念、行业 jargon，提供通俗易懂的理解方式，帮助用户快速掌握新知识领域" },
      { desc: "报告生成和内容创作 - 基于用户需求自动生成各类分析报告、总结文档、营销文案等，支持多种格式输出，提升内容创作效率和质量" },
      { desc: "通用问答和日常咨询 - 处理日常生活中的各类问题，如健康养生、旅游攻略、购物建议、学习规划等，成为用户的智能生活助手" },
      { desc: "数据分析和洞察提取 - 解读复杂数据报表、统计结果，提取关键洞察，为决策提供数据支持和趋势分析" },
      { desc: "多轮对话和上下文理解 - 保持长对话的连贯性，理解上下文语境，提供符合对话场景的智能回复，实现自然流畅的交互体验" }
    ],
    steps: [
      "输入问题或上传需要处理的文档",
      "获取智能回答或处理结果",
      "结束或继续对话"
    ],
    stepImages: [
      "/img/image1.png",
      "/img/image2.png",
      "/img/image3.png"
    ]
  },

  {
    id: 2,
    title: "行政执法AI知识库助手",
    description: "人民银行行政执法AI知识库助手，提供行政执法知识智能问答、法规条款查找和适用条款核对功能",
    author: "科技处",
    tags: ["行政执法", "条款核对", "知识库"],
    category: ["qa", "analytics"],
    avatar: "/img/avatar22.svg",
    demoImage: "/img/zfjczsk.png",
    fullDescription: "人民银行行政执法AI知识库助手基于先进的AI技术，融合大模型、知识库和法律法规，为行政执法工作提供全方位的智能支持。系统具备行政执法知识智能问答、法规条款自动查找、适用条款智能核对三大核心功能，帮助执法人员快速获取准确的法律依据，提高执法效率和准确性。",
    introduction: "针对人民银行行政执法过程涉及法律、规章条款众多，检查人员掌握难度大，导致检查效率低的问题，依托dify AI工作流平台，将人民银行行政执法过程涉及的法律、规章制作成人民银行行政执法AI知识库助手，对检查中发现的问题智能匹配知识库中的条款，给出违反法律规章条款的建议，大大提高行政执法检查人员的检查效率。",
    developer: "科技处",
    version: "v1.0.0",
    usageCount: 0,
    status: 1,
    pagePath: "/agent-function/Enf_Inspection",
    appName: "wenti",
    features: [
      { desc: "行政执法知识智能问答 - 融合大模型、知识库和法律法规，提供专业准确的执法知识解答" },
      { desc: "法规条款自动查找 - 智能分析检查报告，精准匹配适用的法律法规条款" },
      { desc: "适用条款智能核对 - 自动核对报告中的法律条款适用性，提供专业建议" },
      { desc: "自然语言交互 - 支持复杂执法场景的理解和多轮对话交互" }
    ],
    scenarios: [
      { desc: "日常执法咨询 - 为执法人员提供即时的法律知识问答和执法指导" },
      { desc: "检查报告分析 - 自动分析执法检查报告，查找相关法律依据和适用条款" },
      { desc: "法规条款核对 - 核对执法文书中法律条款的准确性和适用性" },
      { desc: "执法培训支持 - 为执法培训提供案例分析和法律知识学习支持" }
    ],
    steps: [
      "行政执法知识智能问答 - 融合大模型、知识库和法律法规，对行政执法相关问题提供专业、准确的智能问答服务",
      "法规条款查找 - 自动分析上传的检查报告，精准查找和匹配适用的法律法规条款，提供完整的法条依据",
      "适用条款核对 - 智能比对报告中的适用条款是否恰当，给出专业的核对意见和改进建议"
    ],
    stepImages: [
      "/img/zfjczsk1.png",
      "/img/zfjczsk2.png",
      "/img/zfjczsk3.png"
    ]
  },



  {
    id: 4,
    title: "执法检查通知书生成助手",
    description: "「执法检查通知书生成助手模版」基于AI技术，智能生成规范的执法检查通知书。",
    author: "科技处",
    tags: ["执法文书", "通知书生成", "行政合规"],
    category: ["service", "analytics"],
    avatar: "/img/avatar4.svg",
    demoImage: "/img/img_4.png",
    fullDescription: "「执法检查通知书生成助手」基于AI技术，智能生成规范的执法检查通知书，确保文书格式正确、内容完整。",
    introduction: "执法检查通知书生成助手能够根据执法检查需求，自动生成符合法律规范的执法检查通知书，包含必要的法律要素和检查内容。",
    developer: "科技处",
    version: "v1.1.2",
    usageCount: 0,
    status: 0,
    pagePath: "/agent-function/AdminLawCheck",
    appName: "AdminLawCheck",
    features: [
      { desc: "基于执法检查需求智能生成通知书" },
      { desc: "确保文书格式符合法律规范" },
      { desc: "自动包含必要的法律要素和检查内容" },
      { desc: "支持多种执法检查场景和类型" }
    ],
    scenarios: [
      { desc: "行政执法检查通知书生成" },
      { desc: "安全生产检查通知书制作" },
      { desc: "环保执法检查文书生成" },
      { desc: "市场监管检查通知书制作" }
    ],
    steps: [
      "输入执法检查基本信息",
      "选择检查类型和法律依据",
      "设置检查内容和要求",
      "启动AI文书生成引擎",
      "审核并导出执法检查通知书"
    ]
  },

  {
    id: 5,
    title: "智能办公助手",
    description: "解析pdf文件转换为word文件",
    author: "科技处",
    tags: ["智能助手", "pdf", "word"],
    category: ["assistant", "service"],
    avatar: "/img/pdf_to_word.svg",
    demoImage: "/img/img_10.png",
    fullDescription: "将用户上传的pdf文件解析转换为word文件",
    introduction: "将用户上传的pdf文件解析转换为word文件",
    developer: "科技处",
    version: "v1.0.0",
    usageCount: 0,
    status: 1,
    pagePath: "/agent-function/PDFRecognition",
    appName: "pdfocr",
    features: [
      { desc: "PDF文件解析" },
      { desc: "Word文件生成" },
      { desc: "内容格式保留" },
      { desc: "批量处理支持" }
    ],
    scenarios: [
      { desc: "办公文档转换" },
      { desc: "文档编辑处理" },
      { desc: "内容提取和重用" },
      { desc: "批量文档转换" }
    ],
    steps: [
      "上传pdf文件",
      "自动解析pdf文件",
      "解析结果预览、核对",
      "下载结果文件"
    ]
  },

  {    id: 19,
    title: "Excel文档智能AI助手",
    description: "「Excel文档AI助手模版」基于AI技术，智能处理和分析Excel文档数据。",
    author: "科技处",
    tags: ["Excel处理", "数据分析", "办公自动化"],
    category: ["analytics", "assistant"],
    avatar: "/img/avatar5.svg",
    demoImage: "/img/img_5.png",
    fullDescription: "「Excel文档AI助手」基于AI技术，智能处理和分析Excel文档数据，提供数据洞察和自动化处理能力。",
    introduction: "Excel文档AI助手能够自动处理Excel文档，进行数据清洗、分析和可视化，生成专业的数据报告和洞察分析。",
    developer: "科技处",
    version: "v1.3.5",
    usageCount: 0,
    status: 0,
    pagePath: "/agent-function/AIchat",
    appName: "ExcelAIAssistant",
    features: [
      { desc: "智能解析Excel文档结构和数据" },
      { desc: "自动进行数据清洗和格式转换" },
      { desc: "生成数据分析和可视化报告" },
      { desc: "支持复杂公式和计算自动化" }
    ],
    scenarios: [
      { desc: "Excel数据自动处理和分析" },
      { desc: "财务报表自动生成和校验" },
      { desc: "业务数据统计和报告生成" },
      { desc: "数据格式转换和清洗" }
    ],
    steps: [
      "上传需要处理的Excel文档",
      "选择处理类型和分析目标",
      "设置数据处理规则和参数",
      "启动AI数据处理引擎",
      "查看分析结果和下载报告"
    ]
  },

  {    id: 3,
    title: "征信问答助手",
    description: "「征信问答助手模版」基于AI技术，提供专业的征信相关问题解答。",
    author: "科技处",
    tags: ["征信查询", "信用评估", "金融咨询"],
    category: ["service", "analytics"],
    avatar: "/img/CreditReference.gif",
    demoImage: "/img/zx.png",
    fullDescription: "「征信问答助手」基于先进AI技术，专业解答征信相关问题，帮助用户了解个人信用状况，提高信用管理意识。",
    introduction: "征信问答助手是一款基于AI技术的专业工具，能够解答各类征信相关问题，提供信用知识普及和信用管理建议。",
    developer: "科技处",
    version: "v1.0.3",
    usageCount: 0,
    status: 1,
    pagePath: "/agent-function/CreditReference",
    appName: "CreditReference",
    features: [
      { desc: "解答各类征信相关专业问题" },
      { desc: "提供个人信用管理知识普及" },
      { desc: "分析信用报告中的关键指标" },
      { desc: "给出信用提升和维护建议" }
    ],
    scenarios: [
      { desc: "个人信用报告解读和分析" },
      { desc: "征信知识学习和普及" },
      { desc: "信用问题咨询和解答" },
      { desc: "信用提升策略获取" }
    ],
    steps: [
      "选择常见问题回答",
      "根据业务场景推荐问题",
      "知识库文件展示",
      "输入问题提问",
      "检索综合知识库内容回答",
      "输出问答结果"
    ],
    stepImages: [
      "/img/zx1.png",
      "/img/zx2.png",
      "/img/zx3.png",
      "/img/zx4.png",
      "/img/zx5.png",
      "/img/zx6.png"
    ],
    hot: true
  },

  {
    id: 6,
    title: "三步翻译",
    description: "能够将专业的英文学术论文转换为通俗易懂的中文科普文章",
    author: "科技处",
    tags: ["翻译", "学术论文", "科普转换"],
    category: ["qa", "service"],
    avatar: "/img/avatar6.svg",
    demoImage: "/img/img_9.png",
    fullDescription: "能够将专业的英文学术论文转换为通俗易懂的中文科普文章",
    introduction: "三步翻译工具专为学术内容普及设计，能够识别专业术语，保持科学准确性，并将复杂概念转化为大众易于理解的表达。",
    developer: "科技处",
    version: "v1.0.0",
    usageCount: 0,
    status: 0,
    pagePath: "/agent-function/three_step_translator",
    appName: "three_step_translator",
    features: [
      { desc: "专业学术论文智能转换" },
      { desc: "保持科学准确性的同时提升可读性" },
      { desc: "识别并恰当处理专业术语" },
      { desc: "三步流程确保高质量转换" }
    ],
    scenarios: [
      { desc: "学术成果科普化传播" },
      { desc: "复杂论文的简明解读" },
      { desc: "科研项目的公众宣传材料制作" },
      { desc: "跨学科知识的无障碍传递" }
    ],
    steps: [
      "输入需要翻译的英文段落"
    ]
  },

  {
    id: 7,
    title: "中英文互译",
    description: "能够进行中英文互译",
    author: "科技处",
    tags: ["翻译", "中英文", "语言转换"],
    category: ["qa", "service"],
    avatar: "/img/avatar7.svg",
    demoImage: "/img/img_10.png",
    fullDescription: "能够进行中英文互译",
    introduction: "中英文互译工具采用先进的神经机器翻译技术，能够准确把握两种语言的细微差别，提供流畅自然的翻译结果。",
    developer: "科技处",
    version: "v1.0.0",
    usageCount: 0,
    status: 0,
    pagePath: "/agent-function/AIchat",
    appName: "chinese_english_translator",
    features: [
      { desc: "精准的中英文双向翻译" },
      { desc: "保持原文语义和表达风格" },
      { desc: "支持多种文本类型（文档、对话、邮件等）" },
      { desc: "实时翻译和批量处理能力" }
    ],
    scenarios: [
      { desc: "商务文档和邮件的快速翻译" },
      { desc: "学术文献的语言转换" },
      { desc: "跨语言沟通和交流支持" },
      { desc: "网站和应用内容的国际化" }
    ],
    steps: [
      "输入需要翻译的段落"
    ]
  },
  {
    "id": 8,
    "title": "全书翻译",
    "description": "能够将英文文档翻译为中文文档",
    "author": "科技处",
    "tags": ["翻译", "文档翻译", "英文转中文"],
    "category": ["qa", "analytics"],
    "avatar": "/img/avatar8.svg",
    "demoImage": "/img/img_9.png",
    "fullDescription": "能够将英文文档翻译为中文文档",
    "introduction": "全书翻译工具专为长篇文档设计，能够处理整本书籍或长篇报告，保持上下文连贯性和专业术语一致性。",
    "developer": "科技处",
    "version": "v1.0.0",
    "usageCount": 0,
    "status": 0,
    "pagePath": "/agent-function/AIchat",
    "appName": "book_translator",
    "features": [
      { "desc": "支持长篇文档的批量翻译" },
      { "desc": "保持文档结构和格式完整性" },
      { "desc": "上下文理解确保翻译连贯性" },
      { "desc": "专业术语一致性管理" }
    ],
    "scenarios": [
      { "desc": "英文书籍和长篇报告的翻译" },
      { "desc": "技术文档和手册的本地化" },
      { "desc": "学术著作的跨语言传播" },
      { "desc": "企业知识库的多语言构建" }
    ],
    "steps": [
      "输入需要翻译的英文段落"
    ]
  },
  {
    "id": 9,
    "title": "合同审查",
    "description": "能够根据上传合同审查清单进行合同审查",
    "author": "科技处",
    "tags": ["合同审查"],
    "category": ["analytics", "service"],
    "avatar": "/img/avatar16.svg",
    "demoImage": "/img/img_16.png",
    "fullDescription": "根据用户上传的合同审查清单对上传的合同进行审查",
    "introduction": "根据用户上传的合同审查清单对上传的合同进行审查",
    "developer": "科技处",
    "version": "v1.0.0",
    "usageCount": 0,
    "status": 0,
    "pagePath": "/agent-function/LGB_AgentLegal",
    "appName": "contract_review_assistant",
    "features": [
      { "desc": "合同条款智能风险分析" },
      { "desc": "合规性检查和法律依据引用" },
      { "desc": "责任界定和义务条款评估" },
      { "desc": "详细的风险报告和修改建议" }
    ],
    "scenarios": [
      { "desc": "企业合同的风险审核和防控" },
      { "desc": "法律文书的合规性检查" },
      { "desc": "合同条款的专业解读" },
      { "desc": "合同谈判前的风险评估" }
    ],
    "steps": [
      "上传合同和合同审查清单"
    ]
  },
  {
    "id": 10,
    "title": "文字排版助手",
    "description": "通常使用Unicode符号和Emoji表情符号对输入的文字进行排版",
    "author": "科技处",
    "tags": ["文字排版", "Unicode", "Emoji优化"],
    "category": ["analytics", "service"],
    "avatar": "/img/avatar9.svg",
    "demoImage": "/img/img_12.png",
    "fullDescription": "通常使用Unicode符号和Emoji表情符号对输入的文字进行排版",
    "introduction": "文字排版助手专注于提升文本信息的表现力，通过科学的排版技巧和视觉元素的合理运用，让文字内容更加生动有趣且易于理解。",
    "developer": "科技处",
    "version": "v1.0.0",
    "usageCount": 0,
    "status": 0,
    "pagePath": "/agent-function/AIchat",
    "appName": "text_formatting_assistant",
    "features": [
      { "desc": "支持Unicode符号和Emoji表情符号排版" },
      { "desc": "提升文字视觉表现力" },
      { "desc": "优化文本结构和层次" },
      { "desc": "支持多种排版风格选择" }
    ],
    "scenarios": [
      { "desc": "社交媒体内容的视觉优化" },
      { "desc": "演讲稿和演示文案的排版美化" },
      { "desc": "教育材料和学习笔记的结构化" },
      { "desc": "营销文案和宣传材料的表现力提升" }
    ],
    "steps": [
      "直接输入需要排版的文字",
      "获得排版结果"
    ]
  },
  {
    "id": 11,
    "title": "文章综述写作助手",
    "description": "融合学习与信息分析技术，支持多种领域的综述文本生成，提供内容摘要与亮点分析",
    "author": "科技处",
    "tags": ["智能问答", "论文写作", "综述生成"],
    "category": ["qa", "assistant"],
    "avatar": "/img/avatar10.svg",
    "demoImage": "/img/img_13.png",
    "fullDescription": "融合学习与信息分析技术，支持多种领域的综述文本生成，提供内容摘要与亮点分析",
    "introduction": "文章综述写作助手基于先进的大语言模型，能够根据研究主题和方向，智能整合相关信息，生成结构清晰、内容全面的学术综述。",
    "developer": "科技处",
    "version": "v1.0.0",
    "usageCount": 0,
    "status": 0,
    "pagePath": "/agent-function/AIchat",
    "appName": "article_review_writer",
    "features": [
      { "desc": "融合学习与信息分析技术" },
      { "desc": "支持多种领域的综述文本生成" },
      { "desc": "提供内容摘要与亮点分析" },
      { "desc": "结构化的综述格式" }
    ],
    "scenarios": [
      { "desc": "学术论文综述部分的撰写辅助" },
      { "desc": "研究课题的文献综述整理" },
      { "desc": "行业发展趋势的分析报告" },
      { "desc": "新产品研发的市场调研综述" }
    ],
    "steps": [
      "输入论文主题，研究方向，字数限制",
      "输入需要综述的论文",
      "获得综述结果"
    ]
  },
  {
    "id": 12,
    "title": "文本润色助手",
    "description": "依据指定的评判标准，对文本进行综合评估，在准确性和信息完整性、句法结构和多样性等方面给出修改建议",
    "author": "科技处",
    "tags": ["文本润色", "内容评估", "对比分析"],
    "category": ["analytics", "service"],
    "avatar": "/img/avatar11.svg",
    "demoImage": "/img/img_14.png",
    "fullDescription": "依据指定的评判标准，对文本进行综合评估，在准确性和信息完整性、句法结构和多样性等方面给出修改建议",
    "introduction": "文本润色助手通过多维度评估标准，对文本进行全面分析，提供专业的修改建议和对比分析，帮助提升文本质量和表达效果。",
    "developer": "科技处",
    "version": "v1.0.0",
    "usageCount": 0,
    "status": 0,
    "pagePath": "/agent-function/AIchat",
    "appName": "text_polishing_assistant",
    "features": [
      { "desc": "多维度文本质量评估" },
      { "desc": "提供准确性和信息完整性分析" },
      { "desc": "句法结构和多样性优化" },
      { "desc": "详细的修改建议" }
    ],
    "scenarios": [
      { "desc": "学术论文和报告的语言润色" },
      { "desc": "营销文案和宣传材料的优化" },
      { "desc": "不同版本内容的对比分析" },
      { "desc": "写作练习和语言学习辅助" }
    ],
    "steps": [
      "输入需要润色的文本",
      "获得评估结果和修改建议"
    ]
  },
  {
    "id": 13,
    "title": "文章翻译助手",
    "description": "文章翻译助手是一款可以输入原文，翻译出中文、英文、日文、法文、俄文、德文、西班牙文、韩文和意大利文等多国语言的工具。尤其擅长将专业学术论文翻译成浅显易懂的科普文章",
    "author": "科技处",
    "tags": ["文章翻译", "意译", "文章理解"],
    "category": ["service", "analytics"],
    "avatar": "/img/avatar12.svg",
    "demoImage": "/img/img_15.png",
    "fullDescription": "文章翻译助手是一款可以输入原文，翻译出中文、英文、日文、法文、俄文、德文、西班牙文、韩文和意大利文等多国语言的工具。尤其擅长将专业学术论文翻译成浅显易懂的科普文章",
    "introduction": "文章翻译助手采用先进的翻译技术，能够处理多种语言之间的转换，并根据不同场景需求提供直译或意译服务，特别擅长学术内容的通俗化转换。",
    "developer": "科技处",
    "version": "v1.0.0",
    "usageCount": 0,
    "status": 0,
    "pagePath": "/agent-function/document-comparison",
    "appName": "article_translation_assistant",
    "features": [
      { "desc": "支持9种语言的互译服务" },
      { "desc": "提供直译和意译两种翻译模式" },
      { "desc": "专业学术内容的通俗化转换" },
      { "desc": "保持原文风格和语义的平衡" }
    ],
    "scenarios": [
      { "desc": "学术论文的多语言转换" },
      { "desc": "专业内容的通俗化科普" },
      { "desc": "跨国会议和交流的翻译支持" },
      { "desc": "国际项目文档的多语言版本" }
    ],
    "steps": [
      "选择目标语言，可以选择简中文、英语、日语、法语、俄语、德语、西班牙语、韩语、意大利语",
      "选择输入语言，包括简中文、英语、日语、法语、俄语、德语、西班牙语、韩语、意大利语",
      "在\"文本\"框中输入需要直译或意译的文本",
      "等待输出",
      "获得翻译结果"
    ]
  },
  {
    "id": 14,
    "title": "知识库智能客服",
    "description": "知识库智能客服是针对特定知识库具有专业答复的工具",
    "author": "科技处",
    "tags": ["知识库", "专业问答", "多轮对话"],
    "category": ["qa", "assistant"],
    "avatar": "/img/avatar13.svg",
    "demoImage": "/img/img_16.png",
    "fullDescription": "知识库智能客服是针对特定知识库具有专业答复的工具",
    "introduction": "知识库智能客服通过深度整合企业知识库，提供精准的信息检索和专业问答服务，支持多轮对话，确保用户获得准确、一致的专业答案。",
    "developer": "科技处",
    "version": "v1.0.0",
    "usageCount": 0,
    "status": 0,
    "pagePath": "/agent-function/social-media",
    "appName": "knowledge_base_service",
    "features": [
      { "desc": "基于知识库的精准问答" },
      { "desc": "支持多轮对话和上下文理解" },
      { "desc": "提供专业领域的准确答复" },
      { "desc": "支持知识源引用和溯源" }
    ],
    "scenarios": [
      { "desc": "企业内部知识共享和查询" },
      { "desc": "产品技术支持和售后服务" },
      { "desc": "教育培训领域的知识解答" },
      { "desc": "政府公共服务信息查询" }
    ],
    "steps": [
      "直接输入问题",
      "获得答复"
    ]
  },
  {
    "id": 15,
    "title": "刑法修正案知识答疑",
    "description": "针对刑法修正案知识给出专业答复的工具",
    "author": "科技处",
    "tags": ["知识检索", "法律知识", "专业解答"],
    "category": ["qa", "assistant"],
    "avatar": "/img/avatar14.svg",
    "demoImage": "/img/img_17.png",
    "fullDescription": "针对刑法修正案知识给出专业答复的工具",
    "introduction": "刑法修正案知识答疑助手专注于提供准确的刑法修正案相关知识，基于权威法律知识库，为用户提供专业、可靠的法律咨询和解答服务。",
    "developer": "科技处",
    "version": "v1.0.0",
    "usageCount": 0,
    "status": 0,
    "pagePath": "/agent-function/video-analysis",
    "appName": "criminal_law_assistant",
    "features": [
      { "desc": "基于权威法律知识库的准确解答" },
      { "desc": "专注于刑法修正案的专业内容" },
      { "desc": "提供法律条文引用和解释" },
      { "desc": "支持复杂法律问题的分析" }
    ],
    "scenarios": [
      { "desc": "法律从业人员的专业参考" },
      { "desc": "法学研究和教育学习辅助" },
      { "desc": "普通民众的法律咨询需求" },
      { "desc": "法律考试和培训的学习工具" }
    ],
    "steps": [
      "直接输入问题",
      "获得专业答复"
    ]
  },
  {
    "id": 16,
    "title": "法律政策分析助手",
    "description": "对于给定的政策文本，给出多维度建议的工具",
    "author": "科技处",
    "tags": ["专业解析", "文本分析", "建议生成"],
    "category": ["analytics", "service"],
    "avatar": "/img/avatar15.svg",
    "demoImage": "/img/img_18.png",
    "fullDescription": "对于给定的政策文本，给出多维度建议的工具",
    "introduction": "法律政策分析助手采用多维度分析框架，对政策文本进行深入解读，识别潜在法律风险和实施挑战，为政策制定和评估提供专业支持。",
    "developer": "科技处",
    "version": "v1.0.0",
    "usageCount": 0,
    "status": 0,
    "pagePath": "/agent-function/business-plan",
    "appName": "legal_policy_analyzer",
    "features": [
      { "desc": "上位法冲突分析" },
      { "desc": "政策内部冲突识别" },
      { "desc": "模糊内容澄清和建议" },
      { "desc": "多维度的政策评估报告" }
    ],
    "scenarios": [
      { "desc": "政府部门政策制定前评估" },
      { "desc": "企业合规风险分析和应对" },
      { "desc": "学术机构政策研究和比较" },
      { "desc": "政策执行效果的评估和改进" }
    ],
    "steps": [
      "上传政策文本或法律条款",
      "获得基于上位法冲突，内部冲突，模糊内容等三个维度的建议"
    ]
  },
  {
    id: 17,
    title: "桂小库",
    description: "针对国库行政许可事项办理时存在的办理材料复杂，涉及金融机构数量多，人工审核和统计难度大等问题，依托dify AI工作流平台，低代码工作流融合AI知识库技术与AI数据库SQL自动生成技术，打造集国库行政许可知识智能问答与业务数据智能查询统计于一体的智能助手",
    author: "科技处",
    tags: ["智能客服", "智能助手", "国库业务"],
    category: ["service", "assistant"],
    avatar: "/img/boy1.gif",
    demoImage: "/img/gxk.png",
    fullDescription: "针对国库行政许可事项办理时存在的办理材料复杂，涉及金融机构数量多，人工审核和统计难度大等问题，依托dify AI工作流平台，低代码工作流融合AI知识库技术与AI数据库SQL自动生成技术，以国库行政许可知识库为基础结合智能统计功能，打造集国库行政许可知识智能问答与业务数据智能查询统计于一体的智能助手，用户既可以一问一答的形式，向\"桂小库\"提问国库行政许可相关知识，也可以用自然语言提出数据查询需求，\"桂小库\"自动查询汇总数据以图表或报告形式向用户展示，大大提高国库行政许可事项办理效率。",
    introduction: "针对国库行政许可事项办理时存在的办理材料复杂，涉及金融机构数量多，人工审核和统计难度大等问题，依托dify AI工作流平台，低代码工作流融合AI知识库技术与AI数据库SQL自动生成技术，以国库行政许可知识库为基础结合智能统计功能，打造集国库行政许可知识智能问答与业务数据智能查询统计于一体的智能助手，用户既可以一问一答的形式，向\"桂小库\"提问国库行政许可相关知识，也可以用自然语言提出数据查询需求，\"桂小库\"自动查询汇总数据以图表或报告形式向用户展示，大大提高国库行政许可事项办理效率。",
    developer: "科技处",
    version: "v1.0.0",
    usageCount: 0,
    status: 1,
    pagePath: "/agent-function/TreasuryAIchat",
    appName: "treasury_app",
    features: [
      { desc: "国库行政许可知识智能问答，提供专业准确的解答" },
      { desc: "业务数据智能查询统计，支持自然语言查询" },
      { desc: "自动生成图表和报告，直观展示数据结果" },
      { desc: "基于AI知识库的智能推荐和辅助决策" }
    ],
    scenarios: [
      { desc: "国库行政许可事项咨询和材料准备指导" },
      { desc: "金融机构业务办理情况统计和分析" },
      { desc: "行政许可流程优化和效率提升" },
      { desc: "国库相关业务数据查询和报告生成" }
    ],
    steps: [
      "智能问答，提供国库相关智能问答服务，满足用户国库知识需求",
      "数据分析，融合大模型与数据库，通过对话完成业务数据的分析",
      "数据图表可视化展现，融合大模型、数据库与echarts图表，通过对话完成数据图表生成",
      "数据表格生成，融合大模型、数据库与excel表格，通过对话完成数据表格生成"
    ],
    stepImages: [
      "/img/gxk1.png",
      "/img/gxk2.png",
      "/img/gxk3.png",
      "/img/gxk4.png"
    ]
  },
  {
    "id": 18,
    "title": "WPS智能助手",
    "description": "集成于WPS套件中的AI助手，有助于大幅提升办公效率",
    "author": "科技处",
    "tags": ["智能问答", "AI审阅", "提取摘要", "一键排版"],
    "category": ["assistant", "service"],
    "avatar": "/img/wpsai.svg",
    "demoImage": "/img/wps.png",
    "fullDescription": "集成于WPS套件中的AI助手，有助于大幅提升办公效率",
    "introduction": "WPS智能助手是深度集成于WPS Office套件中的AI办公助手，通过先进的人工智能技术，为用户提供智能文档处理、智能审阅、内容生成和格式优化等全方位办公支持，帮助用户大幅提升工作效率和文档质量。<span style='color: blue;'>该助手只兼容高版本的wps软件，如需要请</span><a href='http://portal.gxpbc.docker/sys/attachment/sys_att_main/sysAttMain.do?method=download&fdId=19ab8b9718c6dd59e3b1eb844d3957bb&isSupportDirect=null&downloadType=manual&downloadFlag=1764036113151' target='_blank' style='color: blue; text-decoration: underline; font-weight: bold; padding: 2px 4px; border: 1px solid blue; border-radius: 3px;'>点击下载</a><span style='color: blue;'>。</span>",

    "developer": "科技处",
    "version": "v1.0.0",
    "usageCount": 156,
    "status": 1,
    "pagePath": "/agent-function/wps-assistant",
    "appName": "WPSAI",
    "features": [
      { "desc": "智能问答：快速解答文档相关问题" },
      { "desc": "AI审阅：自动检查文档错误和优化建议" },
      { "desc": "提取摘要：智能生成文档核心内容摘要" },
      { "desc": "一键排版：自动优化文档格式和布局" }
    ],
    "scenarios": [
      { "desc": "文档内容快速编辑和优化" },
      { "desc": "长篇文档的智能摘要和提炼" },
      { "desc": "商务文档的专业格式排版" },
      { "desc": "多语言文档的翻译和本地化" }
    ],
    "steps": [
      "安装wpsai插件",
      "在WPS中打开需要处理的文档，点击AI助手图标启动智能功能",
      "选择所需功能（问答、审阅、摘要、排版）",
      "根据AI建议进行文档优化",
      "保存并导出优化后的文档"
    ],
    "stepImages": [
      "/img/wps1.png",
      "/img/wps2.png",
      "/img/wps3.png",
      "/img/wps4.png",
      ""
    ]
  }
];

export default {
  name: 'AIAgentOptimized',
  components: {
    NavBar,
    Footer
  },
  data() {
    return {
      isLiked: false,
      likeCount: 128,
      stepDetails: [
        "支持PDF、Word、PPT等多种格式文档上传，最大支持100MB文件大小",
        "系统自动识别源语言，也可手动指定，支持100+种目标语言选择",
        "可选择金融、法律、医疗等专业领域，上传自定义术语库确保翻译准确性",
        "使用先进的AI翻译引擎，保持原文格式的同时进行高质量翻译",
        "支持下载翻译结果或直接在平台预览，保留原始文档格式和排版",
        "提供详细的翻译质量报告，包括准确率评估和术语一致性检查"
      ]
    };
  },
  computed: {
    currentAgent() {
      const id = parseInt(this.$route.params.id);
      return agentTemplates.find(agent => agent.id === id) || agentTemplates[0];
    },
    recommendedAgents() {
      const currentId = parseInt(this.$route.params.id);
      return agentTemplates
        .filter(agent => agent.id !== currentId)
        .sort((a, b) => b.usageCount - a.usageCount)
        .slice(0, 10);
    }
  },
  methods: {
    handleDownload() {
      // 直接下载WPS智能助手插件
      try {
        // 检查是否为WPS智能助手
        if (this.currentAgent.id !== 18) {
          return;
        }

        // 直接创建下载链接并触发下载
        const link = document.createElement('a');
        link.href = '/download/wpsai.rar';
        link.download = 'wpsai.rar';
        link.style.display = 'none';

        document.body.appendChild(link);
        link.click();

        // 清理资源
        setTimeout(() => {
          try {
            document.body.removeChild(link);
          } catch (e) {
            // 忽略清理错误
          }
        }, 100);

      } catch (error) {
        console.error('下载插件失败:', error);
        // 简化错误处理
        if (this.$message) {
          this.$message({
            message: '下载失败，请稍后重试',
            type: 'error'
          });
        }
      }
    },
    useApp() {
      console.log('执行useApp方法，智能助手ID:', this.currentAgent.id);

      try {
        if (!this.currentAgent.pagePath) {
          console.log('当前智能助手没有pagePath配置');
          if (this.$message) {
            this.$message({
              message: '该智能体功能页面正在开发中',
              type: 'info'
            });
          }
          return;
        }

        // 使用currentAgent中的appName
        let appName = this.currentAgent.appName || 'default';
        console.log('智能助手AppName:', appName);

        // 检查并处理URL构建
        const baseUrl = window.location.origin + this.currentAgent.pagePath;
        const separator = this.currentAgent.pagePath.includes('?') ? '&' : '?';
        const fullUrl = baseUrl + separator + 'appName=' + encodeURIComponent(appName);

        console.log('构建的完整URL:', fullUrl);

        // 尝试打开新窗口
        try {
          const newWindow = window.open(fullUrl, '_blank', 'noopener,noreferrer');

          if (newWindow === null || typeof newWindow === 'undefined') {
            console.warn('无法打开新窗口，可能被浏览器弹窗阻止');
            if (this.$message) {
              this.$message({
                message: '无法打开新窗口，请检查浏览器弹窗设置',
                type: 'warning'
              });
            }
          } else {
            console.log('成功打开新窗口');
          }
        } catch (windowError) {
          console.error('打开新窗口失败:', windowError);
          if (this.$message) {
            this.$message({
              message: '打开功能页面失败，请稍后重试',
              type: 'error'
            });
          }
        }
      } catch (error) {
        console.error('useApp方法执行失败:', error);
        if (this.$message) {
          this.$message({
            message: '操作执行失败，请稍后重试',
            type: 'error'
          });
        }
      }
    },
    handleButtonClick() {
      console.log('按钮被点击，开始处理点击事件');

      try {
        // 确保currentAgent对象存在
        if (!this.currentAgent) {
          console.error('currentAgent对象不存在');
          if (this.$message) {
            this.$message({
              message: '智能体信息加载失败，请刷新页面重试',
              type: 'error'
            });
          }
          return;
        }

        console.log('当前智能助手ID:', this.currentAgent.id);

        // 根据当前智能体ID决定调用哪个方法
        if (this.currentAgent.id === 18) {
          console.log('调用handleDownload方法');
          this.handleDownload();
        } else {
          console.log('调用useApp方法');
          this.useApp();
        }
      } catch (error) {
        console.error('handleButtonClick方法执行失败:', error);
        if (this.$message) {
          this.$message({
            message: '按钮点击处理失败，请稍后重试',
            type: 'error'
          });
        }
      }
    },
    goToDetail(id) {
      this.$router.push({ name: 'AIAgentIntroDetail', params: { id: id } });
    },
    getCategoryName(category) {
      const categoryMap = {
        'assistant': '助手',
        'service': '服务',
        'analytics': '分析',
        'marketing': '营销',
        'sales': '销售'
      };
      // 如果category是数组，返回第一个分类的中文名称
      if (Array.isArray(category) && category.length > 0) {
        return categoryMap[category[0]] || '其他';
      }
      // 兼容单个字符串的情况
      return categoryMap[category] || '其他';
    },
    handleAvatarError(event) {
      // 头像加载失败时显示默认头像
      event.target.src = '/img/ai-avatar.png';
    }
  }
};
</script>

<style scoped>
.ai-agent-optimized {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7ff 0%, #f0f4ff 100%);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* 修复NavBar透明问题 */
.ai-agent-optimized >>> .navbar {
  background: #ffffff !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 主要内容容器，添加顶部边距避免被NavBar遮挡 */
.content-wrapper {
  padding-top: 120px;
}

/* 统一背景容器样式 */
.unified-background {
  background: linear-gradient(135deg, #ffffff 0%, #f8faff 50%, #f0f4ff 100%);
  border-radius: 20px;
  margin: 0 auto 40px;
  padding: 40px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  border: 1px solid #e0e7ff;
  max-width: 1400px;
}

/* 新增：两列布局容器 */
.two-column-layout {
  display: grid;
  grid-template-columns: 51fr 20fr;
  /* 使用grid-gap替代gap */
  grid-gap: 40px;
  align-items: flex-start;
}

/* 左侧列样式 */
.left-column {
  display: flex;
  flex-direction: column;
  /* 使用margin-bottom替代gap */
}
.left-column > * {
  margin-bottom: 40px;
}
.left-column > :last-child {
  margin-bottom: 0;
}

/* 右侧列样式 - 修改为静态定位 */
.right-column {
  position: static; /* 改为静态定位，不跟随滚动 */
  height: auto; /* 高度自适应 */
}

/* 面包屑导航样式 */
.breadcrumb-nav {
  margin-bottom: 30px;
}

.breadcrumb-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 30px;
  display: flex;
  align-items: center;
  font-size: 14px;
}

.breadcrumb-link {
  color: #3b82f6;
  text-decoration: none;
  display: flex;
  align-items: center;
  /* 使用margin替代gap */
  margin-right: 5px;
  transition: color 0.3s ease;
}

.breadcrumb-link:hover {
  color: #1e40af;
  text-decoration: underline;
}

.breadcrumb-separator {
  margin: 0 10px;
  color: #9ca3af;
}

.breadcrumb-current {
  color: #6b7280;
  font-weight: 500;
}

/* 顶部应用信息卡片 */
.app-info-card {
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid #e0e7ff;
  background: white;
}

.app-header {
  padding: 30px 0;
}

.header-content {
  max-width: 100%;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  /* 使用grid-gap替代gap */
  grid-gap: 30px;
  align-items: flex-start;
}

.app-identity {
  display: flex;
  align-items: center;
  /* 使用margin替代gap */
}
.app-identity > * {
  margin-right: 20px;
}
.app-identity > :last-child {
  margin-right: 0;
}

.agent-avatar {
  position: relative;
}

.avatar-img {
  width: 160px;
  height: 160px;
  border-radius: 16px;
  object-fit: cover;
  background: white;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  border: 3px solid #f0f4ff;
}

.app-info {
  padding: 0 20px;
  width: 100%;
}

/* 标题和按钮在同一行的布局 */
.title-action-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  width: 100%;
}

.app-title {
  font-size: 26px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.2;
  margin: 0;
  flex: 1;
}

/* 应用操作按钮样式 */
.app-actions {
  display: flex;
  margin-left: 20px;
}

.enlarged-btn {
  padding: 15px 20px !important;
  font-size: 18px !important;
  border-radius: 12px !important;
  background: #3b82f6 !important;
  color: white !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  display: flex !important;
  align-items: center !important;
  /* 使用margin替代gap */
  margin-right: 10px !important;
  white-space: nowrap !important;
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4) !important;
  font-weight: 600 !important;
}

.enlarged-btn:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.5) !important;
  background: #2563eb !important;
}

.app-description {
  font-size: 16px;
  color: #4b5563;
  margin-bottom: 16px;
  line-height: 1.5;
}

/* 应用元信息样式 */
.app-meta-info {
  display: flex;
  /* 使用margin替代gap */
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 12px 0;
  border-top: 1px solid #e0e7ff;
  border-bottom: 1px solid #e0e7ff;
}
.app-meta-info > * {
  margin-right: 30px;
  margin-bottom: 8px;
}
.app-meta-info > :last-child {
  margin-right: 0;
}

.meta-item {
  display: flex;
  align-items: center;
  /* 使用margin替代gap */
}
.meta-item > * {
  margin-right: 8px;
}
.meta-item > :last-child {
  margin-right: 0;
}

.meta-item strong {
  font-weight: 600;
}

/* 状态样式 */
.status-active {
  color: #10b981;
  font-weight: 600;
}

.status-inactive {
  color: #ef4444;
  font-weight: 600;
}

.app-tags {
  display: flex;
  flex-wrap: wrap;
  /* 使用负margin技巧替代gap */
  margin: -4px;
}
.app-tags .tag {
  margin: 4px;
}

.tag {
  background: #f0f4ff;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 12px;
  color: #3b82f6;
}

/* 侧边栏卡片样式 */
.sidebar-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border: 1px solid #e0e7ff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sidebar-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.recommendations-section {
  margin: 0;
  padding: 0;
  background: transparent;
}

/* 区块头部样式 */
.section-header {
  display: flex;
  align-items: center;
  /* 使用margin替代gap */
}
.section-header > * {
  margin-right: 12px;
}
.section-header > :last-child {
  margin-right: 0;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid #e0e7ff;
}

.section-header i {
  font-size: 24px;
  color: #3b82f6;
}

.section-header h2 {
  font-size: 24px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

/* AI界面演示 */
.demo-section {
  margin-bottom: 0;
}

.demo-container {
  background: #f8faff;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #e0e7ff;
}

.demo-window {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  margin: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.window-header {
  background: #f1f3f4;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  /* 使用margin替代gap */
}
.window-header > * {
  margin-right: 12px;
}
.window-header > :last-child {
  margin-right: 0;
}

.window-controls {
  display: flex;
  /* 使用margin替代gap */
}
.window-controls > * {
  margin-right: 6px;
}
.window-controls > :last-child {
  margin-right: 0;
}

.control {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.control.red { background: #ff5f57; }
.control.yellow { background: #ffbd2e; }
.control.green { background: #28ca42; }

.window-title {
  font-size: 18px;
  color: #666;
  font-weight: 500;
  display: flex;
  align-items: center;
  /* 使用margin替代gap */
}
.window-title > * {
  margin-right: 8px;
}
.window-title > :last-child {
  margin-right: 0;
}

.window-avatar {
  width: 50px;
  height: 50px;
  border-radius: 4px;
  object-fit: cover;
}

.demo-content {
  padding: 10px;
  text-align: center;
  background: white;
}

.app-intro-demo {
  max-width: 100%;
  margin: 0 auto;
  padding: 20px;
  background: #f8faff;
  border-radius: 8px;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 演示场景通用样式 */
.demo-scenario {
  width: 100%;
  max-width: 800px;
}

/* 聊天演示样式 */
.demo-chat {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.chat-bubble {
  padding: 12px 16px;
  border-radius: 18px;
  max-width: 85%;
  word-wrap: break-word;
  line-height: 1.5;
}

.chat-bubble.user {
  background: #e3f2fd;
  color: #0d47a1;
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}

.chat-bubble.ai {
  background: #f3e5f5;
  color: #4a148c;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}

/* 文档演示样式 */
.demo-document {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.document-header {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 15px;
  color: #1e293b;
  text-align: center;
}

.document-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.document-content p {
  margin: 0;
  color: #4b5563;
}

.progress-bar {
  height: 8px;
  background: #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
  margin-top: 10px;
}

.progress {
  height: 100%;
  background: #3b82f6;
  transition: width 1s ease;
}

/* 合同审核样式 */
.contract-review {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.review-item {
  padding: 10px 15px;
  border-radius: 6px;
  font-size: 14px;
}

.review-item.warning {
  background: #fef3c7;
  color: #92400e;
  border-left: 4px solid #f59e0b;
}

.review-item.suggestion {
  background: #dbeafe;
  color: #1e40af;
  border-left: 4px solid #3b82f6;
}

.review-item.normal {
  background: #d1fae5;
  color: #065f46;
  border-left: 4px solid #10b981;
}

/* 文本排版样式 */
.demo-text-formatting {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.formatting-before,
.formatting-after {
  padding: 15px;
  border-radius: 6px;
  font-family: monospace;
}

.formatting-before {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

.formatting-after {
  background: #d1fae5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

/* 文章综述样式 */
.demo-article-review {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.review-header {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 15px;
  color: #1e293b;
  text-align: center;
}

.review-content p {
  margin: 8px 0;
  color: #4b5563;
}

/* 文本润色样式 */
.demo-text-polishing {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.polishing-before,
.polishing-after {
  padding: 15px;
  border-radius: 6px;
  line-height: 1.6;
}

.polishing-before {
  background: #f8fafc;
  color: #475569;
  border: 1px solid #e2e8f0;
}

.polishing-after {
  background: #e0f2fe;
  color: #0369a1;
  border: 1px solid #bae6fd;
}

/* 翻译样式 */
.demo-translation {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.translation-selector {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
  font-weight: 500;
  color: #374151;
}

.translation-result {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.translation-result p {
  margin: 0;
  padding: 10px;
  border-radius: 6px;
  line-height: 1.5;
}

.translation-result p:first-child {
  background: #f3f4f6;
  color: #374151;
}

.translation-result p:last-child {
  background: #eff6ff;
  color: #1e40af;
}

/* 知识库客服样式 */
.demo-chat {
  /* 复用聊天样式 */
}

/* 法律问答样式 */
.demo-law-qa {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.law-question {
  background: #f3f4f6;
  padding: 15px;
  border-radius: 6px 6px 0 0;
  font-weight: 500;
  color: #374151;
}

.law-answer {
  background: #f0f9ff;
  padding: 15px;
  border-radius: 0 0 6px 6px;
  color: #0284c7;
  line-height: 1.6;
  border-top: 2px solid #0ea5e9;
}

/* 政策分析样式 */
.demo-policy-analysis {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.analysis-header {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 15px;
  color: #1e293b;
  text-align: center;
}

.analysis-point {
  padding: 12px 15px;
  margin-bottom: 10px;
  border-radius: 6px;
  background: #f8fafc;
  color: #475569;
  border-left: 4px solid #3b82f6;
}

/* OCR演示样式 */
.demo-ocr {
  text-align: center;
}

.ocr-demo {
  background: white;
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.ocr-icon {
  font-size: 48px;
}

.ocr-status {
  font-size: 16px;
  color: #374151;
}

.ocr-result {
  font-size: 14px;
  color: #10b981;
  font-weight: 500;
}

/* 占位符样式 */
.demo-placeholder {
  text-align: center;
  padding: 40px 20px;
  color: #6b7280;
}

.demo-placeholder p {
  margin: 10px 0;
  font-size: 16px;
}

.demo-placeholder p:first-child {
  font-size: 20px;
  font-weight: 600;
  color: #3b82f6;
}

/* 应用介绍（长文本）*/
.app-intro-section {
  margin-bottom: 0;
}

.app-intro-content {
  background: #f8faff;
  border-radius: 12px;
  padding: 30px;
  line-height: 1.8;
  border-left: 4px solid #3b82f6;
}

.app-intro-content.enlarged-text {
  font-size: 18px;
}

.app-intro-content p {
  margin: 0;
}

/* 使用指南 */
.guide-section {
  margin-bottom: 0;
}

.guide-steps {
  display: flex;
  flex-direction: column;
  /* 使用margin-bottom替代gap */
}
.guide-steps > * {
  margin-bottom: 24px;
}
.guide-steps > :last-child {
  margin-bottom: 0;
}

.guide-steps.enlarged-text {
  font-size: 18px;
}

.step {
  padding: 20px;
  background: #f8faff;
  border-radius: 12px;
  border-left: 4px solid #3b82f6;
  transition: all 0.3s ease;
}

.step:hover {
  background: #e0e7ff;
  transform: translateY(-2px);
}

.step-header {
  display: flex;
  align-items: center;
  /* 使用margin替代gap */
}
.step-header > * {
  margin-right: 16px;
}
.step-header > :last-child {
  margin-right: 0;
  margin-bottom: 12px;
}

.step-number {
  background: #3b82f6;
  color: white;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.step-title {
  font-weight: 600;
  color: #1e293b;
  font-size: 16px;
}

.step-detail {
  color: #64748b;
  line-height: 1.6;
  padding-left: 28px;
}

/* 推荐列表样式 - 移除滚动条 */
.recommendations-list {
  display: flex;
  flex-direction: column;
  /* 使用margin-bottom替代gap */
}
.recommendations-list > * {
  margin-bottom: 16px;
}
.recommendations-list > :last-child {
  margin-bottom: 0;
}

.recommendation-item {
  padding: 16px;
  background: #f8faff;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #e0e7ff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.recommendation-item:hover {
  background: #eef2ff;
  border-color: #c7d2fe;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.rec-header {
  display: flex;
  align-items: center;
  /* 使用margin替代gap */
}
.rec-header > * {
  margin-right: 12px;
}
.rec-header > :last-child {
  margin-right: 0;
}

.rec-content {
  display: flex;
  /* 使用margin替代gap */
}
.rec-content > * {
  margin-right: 16px;
}
.rec-content > :last-child {
  margin-right: 0;
}

.rec-avatar-container {
  flex-shrink: 0;
  width: 65px;
  height: 65px;
  border-radius: 50%;
  overflow: hidden;
  background: white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  border: 2px solid #e0e7ff;
}

.rec-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rec-info {
  flex: 1;
  min-width: 0;
}

.rec-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: #1e293b;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
  min-width: 0;
}

.rec-author {
  font-size: 14px;
  color: #6b7280;
  margin: 0 0 10px 0;
  display: flex;
  align-items: center;
  /* 使用margin替代gap */
}
.rec-author > * {
  margin-right: 6px;
}
.rec-author > :last-child {
  margin-right: 0;
}

.rec-author i {
  color: #9ca3af;
  font-size: 12px;
}

.rec-description {
  font-size: 14px;
  color: #4b5563;
  margin: 10px 0 0 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .two-column-layout {
    grid-template-columns: 1fr;
    /* 使用grid-gap替代gap */
    grid-gap: 30px;
  }

  .right-column {
    position: static;
    order: -1;
  }
}

@media (max-width: 1024px) {
  .content-wrapper {
    padding-top: 100px;
  }

  .unified-background {
    padding: 30px;
    margin: 0 20px 30px;
  }
}

@media (max-width: 768px) {
  .content-wrapper {
    padding-top: 80px;
  }

  .unified-background {
    padding: 20px;
    border-radius: 16px;
    margin: 0 15px 30px;
  }

  .breadcrumb-content {
    font-size: 13px;
    padding: 0 15px;
  }

  .app-header {
    padding: 20px 0;
  }

  .header-content {
    grid-template-columns: 1fr;
    /* 使用grid-gap替代gap */
    grid-gap: 20px;
    text-align: center;
    padding: 0 15px;
  }

  .app-identity {
    justify-content: center;
  }

  .title-action-row {
    flex-direction: column;
    /* 使用margin-bottom替代gap */
    margin-bottom: 15px;
    text-align: center;
  }

  .app-actions {
    margin-left: 0;
    justify-content: center;
  }

  .enlarged-btn {
    padding: 16px 28px !important;
    font-size: 16px !important;
  }

  .app-meta-info {
    flex-direction: column;
    /* 使用margin-bottom替代gap */
    margin-bottom: 10px;
    text-align: center;
  }
  .app-meta-info > * {
    margin-right: 0;
    margin-bottom: 10px;
  }
  .app-meta-info > :last-child {
    margin-bottom: 0;
  }

  .app-title {
    font-size: 24px;
  }

  .sidebar-card {
    padding: 20px;
  }

  .demo-content {
    padding: 15px;
  }

  .app-intro-content.enlarged-text,
  .guide-steps.enlarged-text {
    font-size: 16px;
  }

  .rec-content {
    flex-direction: column;
    text-align: center;
  }

  .rec-avatar-container {
    align-self: center;
  }
}

@media (max-width: 480px) {
  .unified-background {
    padding: 15px;
    border-radius: 12px;
    margin: 0 10px 20px;
  }

  .breadcrumb-content {
    font-size: 12px;
  }

  .app-header {
    padding: 15px 0;
  }

  .app-title {
    font-size: 20px;
  }

  .avatar-img {
    width: 120px;
    height: 120px;
  }

  .enlarged-btn {
    padding: 14px 24px !important;
    font-size: 15px !important;
  }

  .section-header h2 {
    font-size: 20px;
  }

  .app-intro-content {
    padding: 20px;
  }

  .guide-steps {
    /* 使用margin-bottom替代gap */
  }
  .guide-steps > * {
    margin-bottom: 15px;
  }
  .guide-steps > :last-child {
    margin-bottom: 0;
  }

  .step {
    padding: 15px;
  }

  .sidebar-card {
    padding: 16px;
    border-radius: 12px;
  }

  .recommendation-item {
    padding: 16px;
  }

  .demo-content {
    padding: 10px;
  }
}

/* 会话窗口样式 */
.chat-window {
  width: 100%;
  max-width: 600px;
  height: 450px;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  overflow: hidden;
  background-color: #fafafa;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

.chat-history {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  /*gap: 16px;*/
}

.chat-message {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16px;
  /*gap: 12px;*/
}

.chat-message.system {
  justify-content: center;
  margin-bottom: 16px;
  margin-right: 12px;
}

.system-message {
  background-color: #e3f2fd;
  padding: 8px 16px;
  border-radius: 16px;
  font-size: 14px;
  color: #1976d2;
  text-align: center;
}

.message-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  margin-right: 12px;
}

.message-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.message-avatar i {
  font-size: 18px;
  color: #666;
}

.message-content {
  max-width: 75%;
  padding: 12px 16px;
  border-radius: 18px;
  font-size: 15px;
  line-height: 1.5;
  word-wrap: break-word;
}

.chat-message.user .message-content {
  background-color: #1976d2;
  color: white;
  border-bottom-right-radius: 4px;
  margin-left: auto;
}

.chat-message.ai .message-content {
  background-color: white;
  color: #333;
  border: 1px solid #e0e0e0;
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.chat-input-area {
  display: flex;
  padding: 16px;
  background-color: white;
  border-top: 1px solid #e0e0e0;
  /*gap: 8px;*/
}

.chat-input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid #e0e0e0;
  border-radius: 24px;
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s;
  margin-right: 8px;
}

.chat-input:focus {
  border-color: #1976d2;
}

.send-button {
  padding: 12px 24px;
  background-color: #1976d2;
  color: white;
  border: none;
  border-radius: 24px;
  font-size: 15px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.send-button:hover {
  background-color: #1565c0;
}

.send-button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

/* 各种功能演示的特定样式 */
.progress-container {
  width: 100%;
  height: 8px;
  background-color: #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
  margin: 8px 0 12px;
}

.progress-bar {
  height: 100%;
  background-color: #4caf50;
  transition: width 0.3s ease;
}

.review-tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 600;
  margin: 8px 0;
}

.review-tag.warning {
  background-color: #fff3cd;
  color: #856404;
}

.review-tag.suggestion {
  background-color: #d1ecf1;
  color: #0c5460;
}

.review-tag.success {
  background-color: #d4edda;
  color: #155724;
}

.text-before, .polish-before {
  background-color: #f8f9fa;
  padding: 12px;
  border-radius: 8px;
  margin: 8px 0;
  font-family: monospace;
}

.text-after, .polish-after {
  background-color: #e8f5e9;
  padding: 12px;
  border-radius: 8px;
  margin: 8px 0;
  font-family: monospace;
  font-weight: 600;
}

.analysis-item {
  background-color: #f8f9fa;
  padding: 16px;
  border-radius: 8px;
  margin: 8px 0;
}

.analysis-item h5 {
  margin: 0 0 8px;
  font-size: 16px;
  color: #495057;
}

.analysis-item p {
  margin: 4px 0;
}

.law-article {
  background-color: #f8f9fa;
  padding: 16px;
  border-left: 4px solid #6c757d;
  margin: 12px 0;
  font-family: monospace;
  line-height: 1.6;
}

.ocr-progress {
  background-color: #f8f9fa;
  padding: 12px;
  border-radius: 8px;
  margin: 12px 0;
}

.ocr-status {
  font-size: 14px;
  color: #6c757d;
  margin-bottom: 8px;
}

.ocr-preview {
  background-color: #fff;
  padding: 12px;
  border-radius: 8px;
  margin-top: 12px;
  border: 1px solid #e9ecef;
}

.file-upload {
  background-color: #e9ecef;
  padding: 8px 16px;
  border-radius: 6px;
  margin-top: 8px;
  font-size: 14px;
  display: inline-block;
}

/* 桂小库智能体专用样式 */
.answer-item {
  background-color: #f8f9fa;
  padding: 16px;
  border-radius: 8px;
  margin: 12px 0;
  border-left: 4px solid #1976d2;
}

.answer-item h5 {
  margin: 0 0 12px;
  font-size: 16px;
  color: #1976d2;
}

.answer-item ul {
  margin: 0;
  padding-left: 20px;
}

.answer-item li {
  margin-bottom: 8px;
  line-height: 1.5;
}

.stats-preview {
  background-color: #f8f9fa;
  padding: 16px;
  border-radius: 8px;
  margin: 12px 0;
  border: 1px solid #e9ecef;
}

.stats-preview h5 {
  margin: 0 0 16px;
  font-size: 16px;
  color: #333;
  text-align: center;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 12px;
}

.stat-item {
  text-align: center;
  padding: 12px;
  background-color: white;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}

.stat-number {
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: #1976d2;
  margin-bottom: 4px;
}

.stat-label {
  display: block;
  font-size: 12px;
  color: #666;
  font-weight: 500;
}

/* WPS智能助手专用样式 */
.review-result {
  background-color: #f8f9fa;
  padding: 16px;
  border-radius: 8px;
  margin: 12px 0;
  border-left: 4px solid #28a745;
}

.review-result h5 {
  margin: 0 0 12px;
  font-size: 16px;
  color: #28a745;
}

.review-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #e9ecef;
}

.review-item:last-child {
  margin-bottom: 0;
  border-bottom: none;
}

.review-type {
  font-weight: 600;
  color: #495057;
  min-width: 80px;
  flex-shrink: 0;
}

.review-suggestion {
  color: #6c757d;
  flex: 1;
}

.summary-preview {
  background-color: #f8f9fa;
  padding: 16px;
  border-radius: 8px;
  margin: 12px 0;
  border: 1px solid #e9ecef;
}

.summary-preview h5 {
  margin: 0 0 12px;
  font-size: 16px;
  color: #333;
  text-align: center;
}

.summary-preview p {
  margin: 8px 0;
  line-height: 1.6;
}

.summary-preview strong {
  color: #495057;
}

/* 演示图片样式 */
.app-intro-image {
  text-align: center;
  margin-bottom: 20px;
  padding: 16px;
  background-color: #fff;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.intro-image {
  width: 95%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  object-fit: cover;
}

/* 步骤图片样式 */
.step-image {
  margin-top: 12px;
  text-align: center;
}

.step-image img {
  width: 95%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  object-fit: cover;
  border: 1px solid #e9ecef;
}
</style>
